<script lang="ts" setup>
import { Reading, DocumentCopy, ChromeFilled, DArrowRight, DArrowLeft, Tickets, CloseBold } from '@element-plus/icons-vue'
import { Copy } from '@/util'
import { form, selectedRow, detailDialog } from '@/composables/useWebscanState'
import { CheckFileStat, ReadFile } from 'wailsjs/go/services/File'
import global from "@/stores"
import githubIcon from '@/assets/icon/github.svg'
import { BrowserOpenURL } from 'wailsjs/runtime/runtime'

async function showPocDetail(filename: string) {
    form.showYamlPoc = !form.showYamlPoc
    if (!form.showYamlPoc) {
        return
    }
    let filepath = global.PATH.homedir + "/slack/config/pocs/" + filename + ".yaml"
    let isStat = await CheckFileStat(filepath)
    if (!isStat) {
        filepath = global.webscan.append_pocfile + "/" + filename + ".yaml"
    }
    let file = await ReadFile(filepath)
    form.pocContent = file.Content
}
</script>

<template>
    <el-drawer v-model="detailDialog" size="80%" @close="form.showYamlPoc = false">
        <template #header>
            <el-button :icon="Reading" link>漏洞详情</el-button>
            <el-button :icon="githubIcon" link
                @click="BrowserOpenURL('https://github.com/qiwentaidi/Slack/issues/new?title=' + selectedRow.ID)">误报提交</el-button>
            <el-divider direction="vertical" />
        </template>
        <div v-if="selectedRow">
            <el-descriptions :column="1" border class="w-full mb-10px">
                <el-descriptions-item label="Name:">{{ selectedRow.Name }}</el-descriptions-item>
                <el-descriptions-item label="Description:">
                    <span class="all-break">{{ selectedRow.Description }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="Reference:">
                    <div v-for="item in selectedRow.Reference.split(',')">
                        <el-link>{{ item }}</el-link>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="Extracted:">{{ selectedRow.Extract }}</el-descriptions-item>
            </el-descriptions>
            <div class="flex">
                <el-card v-show="!form.hideRequest" class="flex-1 mr-5px">
                    <div class="flex-between">
                        <span class="font-bold">Request</span>
                        <el-button-group>
                            <el-button :icon="form.hideResponse ? DArrowLeft : DArrowRight" link
                                @click="form.hideResponse = !form.hideResponse" />
                            <el-button :icon="DocumentCopy" link @click="Copy(selectedRow.Request)" />
                            <el-button :icon="ChromeFilled" link @click="BrowserOpenURL(selectedRow.URL)" />
                        </el-button-group>
                    </div>
                    <highlightjs 
                        language="http" 
                        :code="selectedRow.Request" 
                        class="font-small"
                    ></highlightjs>
                </el-card>
                <el-card v-show="!form.hideResponse" class="flex-1">
                    <div class="flex-between">
                        <span class="font-bold">Response
                            <el-tag type="success" style="margin-left: 2px;">{{ selectedRow.ResponseTime ?
                                selectedRow.ResponseTime : '0' }}s</el-tag>
                        </span>
                        <el-button-group>
                            <el-tooltip content="查看/关闭POC内容">
                                <el-button :icon="Tickets" link @click="showPocDetail(selectedRow.ID)" />
                            </el-tooltip>
                            <el-button :icon="form.hideRequest ? DArrowRight : DArrowLeft" link
                                @click="form.hideRequest = !form.hideRequest" />
                            <el-button :icon="DocumentCopy" link @click="Copy(selectedRow.Response)" />
                        </el-button-group>
                    </div>
                    <highlightjs language="http" :code="selectedRow.Response" class="font-small"></highlightjs>
                </el-card>
            </div>
            <el-card v-if="form.showYamlPoc" class="mt-10px">
                <div class="flex-between">
                    <span class="font-bold">Yaml Poc Content</span>
                    <el-button :icon="CloseBold" link @click="form.showYamlPoc = false" />
                </div>
                <highlightjs language="yaml" :code="form.pocContent" class="font-small"></highlightjs>
            </el-card>
        </div>
    </el-drawer>
</template>

